<template>
  <div class="set-container">
    <div class="title">远程同步</div>
    <div class="wrap">
      <div class="item-l">
        <div class="form-item">
          <div class="form-label form-col-1">同步频率</div>
          <div class="">
            <select v-model="form.rate">
              <option value="0">不同步</option>
              <option value="5">5分钟</option>
              <option value="30">30分钟</option>
              <option value="60">1小时</option>
              <option value="180">3小时</option>
              <option value="600">12小时</option>
            </select>
          </div>
          <div>
            <button @click="" class="btn">立即同步</button>
          </div>
        </div>
      </div>
      <div class="item-l">
        <div class="form-item">
          <div class="form-label form-col-1">存储方式</div>
          <div class="form-c">
            <select v-model="form.type">
              <option value="local">本地</option>
              <option value="gitee">Gitee</option>
            </select>
          </div>
        </div>
        <template v-if="form.type === 'gitee'">
          <div class="form-item">
            <div class="form-label form-col-1">文件路径</div>
            <div class="form-c">
              <input v-model="form.gitee.filePath" placeholder="文件路径" />
            </div>
          </div>
          <div class="form-item">
            <div class="form-label form-col-1">仓库配置</div>
            <div class="form-c">
              <input v-model="form.gitee.owner" placeholder="仓库拥有者" />
            </div>
          </div>
          <div class="form-item">
            <div class="form-label form-col-1">仓库名称</div>
            <div class="form-c">
              <input v-model="form.gitee.repo" placeholder="仓库名称" />
            </div>
          </div>
          <div class="form-item">
            <div class="form-label form-col-1">客户端ID</div>
            <div class="form-c">
              <input v-model="form.gitee.clientId" placeholder="客户端ID" />
            </div>
          </div>
          <div class="form-item">
            <div class="form-label form-col-1">仓库密钥</div>
            <div class="form-c">
              <input v-model="form.gitee.clentSecret" placeholder="仓库密钥" />
            </div>
          </div>
          <div class="form-item">
            <div class="form-label form-col-1">用户名</div>
            <div class="form-c">
              <input v-model="form.gitee.username" placeholder="用户名" />
            </div>
          </div>
          <div class="form-item">
            <div class="form-label form-col-1">密码</div>
            <div class="form-c">
              <input v-model="form.gitee.pass" placeholder="密码" />
            </div>
          </div>
        </template>
      </div>
    </div>
    <Button @click="onSetting" class="btn btn-primary">保存</Button>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { RepoConfig } from '../components/type.d.ts';
import { setStorage } from '../utils/storage.ts';

const rate = ref('0');
const form = reactive<RepoConfig>({
  open: 'no',
  type: 'local',
  rate: 0,
  gitee: {
    owner: '',
    repo: '',
    filePath: '',
    clientId: '',
    clentSecret: '',
    pass: '',
    username: '',
  },
});
const onSetting = () => {
  console.log('form', form);
  setStorage('remote', form);
};
</script>
<style scoped lang="scss">
.set-container {
  width: 50%;
  .title {
    font-size: 20px;
    font-weight: 700;
  }
  .wrap {
    .item-t {
      font-size: 14px;
      font-weight: 700;
    }
    .item-l {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
